<template>
  <van-nav-bar :title="title" fixed class="myhead">
    <template #left v-if="back">
      <slot>
        <van-icon
          name="arrow-left"
          size="18"
          class="size"
          @click="gotoback"
        ></van-icon>
      </slot>
    </template>
    <template #right>
      <van-popover
        v-model="showPopover"
        trigger="click"
        @select="chooseitem"
        :actions="actions"
        placement="bottom-end"
      >
        <template #reference>
          <van-icon name="ellipsis" class="size" />
        </template>
      </van-popover>
    </template>
  </van-nav-bar>
</template>

<script>
export default {
  data() {
    return {
      showPopover: false,
      actions: [],
      actions1: [
        {
          text: "搜索",
          icon: "search",
          name: "search",
          disabled: this.$route.name == "search",
        },
        {
          text: "首页",
          icon: "wap-home-o",
          name: "movie",
          disabled: this.$route.name == "movie",
        },
        {
          text: "拍照",
          icon: "paid",
          name: "photo",
          disabled: this.$route.name == "photo",
        },
      ],
      actions2: [
        {
          text: "搜索",
          icon: "search",
          name: "search",
          disabled: this.$route.name == "search",
        },
        {
          text: "登录",
          icon: "friends-o",
          name: "login",
          disabled: this.$route.name == "login",
        },
        {
          text: "注册",
          icon: "more-o",
          name: "register",
          disabled: this.$route.name == "register",
        },
        {
          text: "首页",
          icon: "wap-home-o",
          name: "movie",
          disabled: this.$route.name == "movie",
        },
        {
          text: "拍照",
          icon: "paid",
          name: "photo",
          disabled: this.$route.name == "photo",
        },
      ],
    };
  },
  watch:{
    userInfo:{
      deep:true,
      handler(v){
        if(v){
          this.actions = [...this.actions1]
        }else{
          this.actions = [...this.actions2]
        }
      }
    }
  },
  props: {
    title: String,
    back: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    chooseitem(value, index) {
      console.log(value, index);
      this.$router.push({
        name: value.name,
      });
    },
  },
  mounted() {
    if (this.userInfo) {
      this.actions = [...this.actions1];
    } else {
      this.actions = [...this.actions2];
    }
  },
};
</script>

<style lang="scss" scoped>
.myhead {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  .size {
    font-size: 20px;
  }
}
</style>